<template>
  <div class="bg-style">
    <div style="display:flex;justify-content: space-around;flex-wrap: wrap;padding-top:10px">
      <div class="top-area">
        <div style="width:33%" class="top-left">
          <commonTitle text="柱状图与折线图混合"></commonTitle>
          <div id="chart" style="width: 100%;height:400px;background-color: #091137;"></div>
        </div>
        <div style="width:33%;" class="top-middle">
          <commonTitle text="雷达图"></commonTitle>
          <div id="radar" style="width: 100%;height:400px; background-color: #091137;"></div>
        </div>
        <div style="width:33%;" class="top-middle">
          <commonTitle text="平行坐标系"></commonTitle>
          <div id="grid" style="width: 100%;height:400px;background-color: #091137;"></div>
        </div>
      </div>
      <div class="mddile-area">
        <div style="width:100%;" class="top-left">
          <commonTitle text="折线面积混合"></commonTitle>
          <div id="lineArea" style="width: 100%;height:400px;background-color: #091137;"></div>
        </div>
      </div>
      <div class="bottom-area">
        <div style="width:33%;" class="top-left">
          <commonTitle text="环形图"></commonTitle>
          <div id="pie" style="width: 100%;height:400px;background-color: #091137;"></div>
        </div>
        <div style="width:33%;" class="top-left">
          <commonTitle text="柱状图"></commonTitle>
          <div id="bar" style="width: 100%;height:400px;background-color: #091137;"></div>
        </div>
        <div style="width:33%;" class="top-left">
          <commonTitle text="饼图"></commonTitle>
          <div id="pieTwo" style="width: 100%;height:400px;background-color: #091137;"></div>
        </div>
      </div>

      <div class="bottom-area">
        <div style="width:33%;" class="top-left">
          <commonTitle text="双环形图"></commonTitle>
          <div id="twoPie" style="width: 100%;height:400px;background-color: #091137;"></div>
        </div>
        <div style="width:33%;" class="top-left">
          <commonTitle text="双柱状图"></commonTitle>
          <div id="twoBar" style="width: 100%;height:400px;background-color: #091137;"></div>
        </div>
        <div style="width:33%;" class="top-left">
          <commonTitle text="饼图"></commonTitle>
          <div id="pieTwo" style="width: 100%;height:400px;background-color: #091137;"></div>
        </div>
      </div>


    </div>
  </div>
</template>
<script>
import commonTitle from "../components/commonTitle.vue";
export default {
  components: {
    commonTitle
  },
  data() {
    return {
      colorList: [
        "#47A2FF ",
        "#53C8D1",
        "#59CB74",
        "#FBD444",
        "#7F6AAD",
        "#585247",
        "#ff0000"
      ]
    };
  },
  mounted() {
    this.initCharts();
    this.twoInitCharts();
    this.threeCharts();
    this.fourCharts();
    this.fiveCharts();
    this.sixCharts();
    this.sevenCharts();
    this.eightCharts();
    this.nineCharts()
  },
  methods: {
    initCharts() {
      let chart = this.$echarts.init(document.getElementById("chart"));
      var option1 = {
        //提示框，默认显示
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        //图例相关
        legend: {
          data: ["绿电消纳量", "减少碳排放"], //与series两个对象中的name对应
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            //图例的公用文本样式
            color: "#fff" //图例的文字颜色
          }
        },
        // x轴（指的是水平的那条线）相关配置
        xAxis: {
          type: "category",
          data: ["2019", "2020", "2021", "2022", "2023"], //类目轴数据
          axisLabel: {
            show: true, // 是否显示
            inside: false, // 是否朝内
            color: "#fff",
            fontSize: 12,
            interval: 0 //设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
          },

          axisLine: {
            show: true, // 是否显示
            lineStyle: {
              color: "#737EDA",
              width: 1,
              type: "solid"
            }
          },
          axisTick: {
            show: false
          },
          boundaryGap: "true", //显示刻度，默认为 true,只是作为分隔线，标签和数据点都会在两个刻度之间的带中间
          axisTick: {
            //坐标轴刻度相关
            alignWithLabel: true //类目轴中在`boundaryGap`为`true`的时候有效，可以保证刻度线和标签对齐
          },
          axisTick: {
            //是否显示刻度线
            show: false
          }
        },

        // y轴（垂直的那条线）设置
        yAxis: [
          {
            name: "单位(万kwh)",
            type: "value", //x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴
            axisLabel: {
              // 坐标轴标签
              show: true, // 是否显示
              // inside: true, // 标签是否朝内,默认false
              // interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
              rotate: 0, // 旋转角度
              margin: 5, // 刻度标签与轴线之间的距离
              color: "#fff", // 标签颜色默认取轴线的颜色
              fontSize: 12 //标签字号
            },
            splitLine: {
              // 网格线
              show: true, // 是否显示，默认为true
              lineStyle: {
                //网格线颜色
                type: "dotted",
                color: "#737EDA"
              }
            },
            axisTick: {
              //是否显示刻度线
              show: false
            },
            axisLine: {
              // 坐标轴 轴线
              show: true, // 是否显示,默认false
              lineStyle: {
                color: "#737EDA", //轴线颜色
                width: 1, //轴线宽度
                type: "solid" //轴线类型
              }
            }
          },
          {
            type: "value", //x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴
            axisLabel: {
              // 坐标轴标签
              show: true, // 是否显示
              // inside: true, // 标签是否朝内,默认false
              // interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
              rotate: 0, // 旋转角度
              margin: 5, // 刻度标签与轴线之间的距离
              color: "#fff", // 标签颜色默认取轴线的颜色
              fontSize: 12 //标签字号
            },
            splitLine: {
              // 网格线
              show: false // 是否显示，默认为true
            },
            axisTick: {
              //是否显示刻度线
              show: false
            },
            axisLine: {
              // 坐标轴 轴线
              show: true, // 是否显示,默认false
              lineStyle: {
                color: "#737EDA", //轴线颜色
                width: 1, //轴线宽度
                type: "solid" //轴线类型
              }
            }
          }
        ],
        series: [
          {
            name: "减少碳排放",
            type: "line", //表明柱状体，饼图是pie，折线图是line
            barWidth: 10, //柱子宽度
            data: [10, 50, 30, 26, 17, 47], //值数据，与类型数据一一对应
            yAxisIndex: 0, //数据的刻度对应左边
            itemStyle: {
              normal: {
                //柱子相关设置
                // barBorderRadius: [7,7,0,0],//设置柱子圆角;左上-右上-右下-左下
                color: "#1DE4FF"
              }
            }
          },
          {
            name: "绿电消纳量",
            type: "bar", //表明柱状体，饼图是pie，折线图是line
            barWidth: 20, //柱子宽度
            data: [18, 30, 25, 40, 27, 17], //值数据，与类型数据一一对应
            yAxisIndex: 1, //数据的刻度对应右边
            itemStyle: {
              //鼠标移入动态的时候显示的柱形图颜色
              //emphasis: {
              //color: "#ccc"
              //},
              normal: {
                //柱子相关设置
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: "#84C552" },
                    { offset: 1, color: "#6CE162" }
                  ],
                  globalCoord: false // 缺省为 false
                }
              }
            }
          }
        ]
      };
      chart.setOption(option1);
    },
    twoInitCharts() {
      // 1. 实例化对象
      let myChart = this.$echarts.init(document.getElementById("radar"));
      var option = {
        tooltip: {
          enterable: true //鼠标是否可以移动到tooltip区域内
        },
        radar: {
          radius: "60%", //雷达图的大小
          shape: "circle",
          splitNumber: 5, // 雷达图圈数设置
          name: {
            textStyle: {
              color: "#fff"
            }
          },
          // 设置雷达图中间射线的颜色
          axisLine: {
            lineStyle: {
              color: "#AAA8FF"
            }
          },
          indicator: [
            {
              name: "绿色用能指数",
              max: 30
            },
            { name: "行业消费与排行", max: 30 },
            { name: "区域能源消费与排行", max: 30 }
          ],
          splitArea: {
            show: false,
            areaStyle: {
              color: "#1E9FE8" // 图表背景的颜色
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              type: "dotted",
              color: "rgba(170, 168, 255, 0.3)"
            }
          }
        },
        series: [
          {
            name: "雷达图", // tooltip中的标题
            type: "radar", //表示是雷达图
            symbol: "circle", // 拐点的样式，还可以取值'rect','angle'等
            symbolSize: 8, // 拐点的大小
            label: {
              show: true,
              color: "#fff"
            },
            areaStyle: {
              normal: {
                width: 1,
                opacity: 0.2
              }
            },
            data: [
              {
                value: [17, 24, 27, 29, 26, 16, 13, 17, 25, 12],
                name: "2018-07",
                // 设置区域边框和区域的颜色
                itemStyle: {
                  normal: {
                    color: "#1E9FE8",
                    lineStyle: {
                      color: "rgba(255,225,0,.3)"
                    }
                  }
                }
              }
            ]
          }
        ]
      };
      // 3.把配置和数据给对象
      myChart.setOption(option);
    },

    threeCharts() {
      let myChart = this.$echarts.init(document.getElementById("pie"));
      var option = {
        title: {
          textStyle: {
            fontSize: 16,
            color: "#999",
            lineHeight: 20
          },
          subtextStyle: {
            fontSize: 28,
            color: "#333"
          },
          textAlign: "center",
          left: "39.8%",
          top: "45%"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: "10%",
          top: "center",
          itemGap: 20,
          itemWidth: 10,
          itemHeight: 10,
          selectedMode: false,
          icon: "rect",
          data: ["电", "天然气", "热力", "煤炭", "柴油", "汽油", "其他"],
          textStyle: {
            color: "#77899c",
            rich: {
              uname: {
                width: 100
              },
              unum: {
                color: "#fff",
                width: 40,
                align: "right"
              }
            }
          },
          formatter(name) {
            return `{uname|${name}}{unum|1132}`;
          }
        },
        color: this.colorList,
        series: [
          {
            name: "姓名",
            type: "pie",
            radius: [60, 90],
            center: ["40%", "50%"],
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              normal: {
                borderWidth: 2,
                borderColor: "#091137",
                color: function(params) {
                  var colorList = [
                    "#31FBFB",
                    "#5765E3",
                    "#FFCD4E",
                    "#FF9040",
                    "#3CD495",
                    "#349DFF",
                    "#8465FF"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            },

            data: [
              { name: "电", value: 100 },
              { name: "天然气", value: 100 },
              { name: "热力", value: 100 },
              { name: "煤炭", value: 100 },
              { name: "柴油", value: 100 },
              { name: "汽油", value: 100 },
              { name: "其他", value: 100 }
            ]
          }
        ]
      };
      myChart.setOption(option);
    },
    fourCharts() {
      let myChart = this.$echarts.init(document.getElementById("grid"));
      var option = {
        color: ["#7C67FF", "#FF784E", "#05D2FF", "#41DF51"], //这里要设置否则下面的legend设置不生效
        legend: {
          icon: "diamond",
          textStyle: {
            color: "#fff"
          },
          data: [
            {
              show: true,
              name: "实际值",
              itemStyle: {
                color: "#7C67FF"
              }
            },
            {
              name: "约束值",
              itemStyle: {
                color: "#FF784E"
              }
            },
            {
              name: "基准值",
              itemStyle: {
                color: "#05D2FF"
              }
            },
            {
              name: "引导值",
              itemStyle: {
                color: "#41DF51"
              }
            }
          ]
        },
        parallelAxis: [
          {
            dim: 0,
            name: "单位采暖面积供暖能耗(kgce/(㎡·a))",
            nameTextStyle: {
              fontSize: 10
            },
            axisLine: {
              lineStyle: {
                color: "#909EE4"
              },
              axisLabel: {
                color: "#fff"
              }
            },
            axisLabel: {
              color: "#fff"
            }
          },
          {
            dim: 1,
            name: "单位面积非供暖能耗(kgce / (㎡·a))",
            nameTextStyle: {
              fontSize: 10
            },
            axisLine: {
              lineStyle: {
                color: "#909EE4"
              },
              axisLabel: {
                color: "#fff"
              }
            },
            axisLabel: {
              color: "#fff"
            }
          },
          {
            dim: 2,
            name: "人均综合能耗(kgce / (p·a))",
            nameTextStyle: {
              fontSize: 10
            },
            axisLine: {
              lineStyle: {
                color: "#909EE4"
              },
              axisLabel: {
                color: "#fff"
              }
            },
            axisLabel: {
              color: "#fff"
            }
          },
          {
            dim: 3,
            name: "单位建筑面积电耗(kWh / (㎡·a)) ",
            nameTextStyle: {
              fontSize: 10
            },
            axisLine: {
              lineStyle: {
                color: "#909EE4"
              }
            },
            axisLabel: {
              color: "#fff"
            }
          }
        ],
        series: [
          {
            name: "实际值",
            type: "parallel",
            data: [
              {
                name: "实际值",
                value: [12.99, 100, 82, 45],
                lineStyle: {
                  color: "#7C67FF"
                },
                cap: "round"
              }
            ]
          },
          {
            name: "约束值",
            type: "parallel",
            data: [
              {
                name: "实际值",
                value: [45, 54, 23, 43],
                lineStyle: {
                  color: "#FF784E"
                }
              }
            ]
          },
          {
            name: "基准值",
            type: "parallel",
            data: [
              {
                name: "实际值",
                value: [54, 23, 32, 53],
                lineStyle: {
                  color: "#05D2FF"
                }
              }
            ]
          },
          {
            name: "引导值",
            type: "parallel",
            data: [
              {
                name: "实际值",
                value: [63, 32, 42, 54],
                lineStyle: {
                  color: "#41DF51"
                }
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
    },
    fiveCharts() {
      let myChart = this.$echarts.init(document.getElementById("bar"));
      var option = {
        legend: {
          show: true,
          top: "5%",
          textStyle: {
            color: "#fff" // 设置字体颜色为红色
          }
        },
        color: {
          type: "linear",
          x: 1,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            { offset: 0, color: "#D6872A" },
            { offset: 1, color: "#CCC511" }
          ],
          globalCoord: false // 缺省为 false
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        xAxis: {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          axisPointer: {
            show: true
          },
          axisLine: {
            //坐标轴线相关设置
            show: true, //是否显示坐标轴线
            lineStyle: {
              color: "#737EDA", //坐标轴线的颜色
              width: 1, //坐标轴线宽,
              type: "solid" //线的类型   solid,dashed,dotted
            }
          },
          axisTick: {
            //坐标轴刻度的相关设置
            show: false //是否显示坐标轴刻度
          },
          axisLabel: {
            show: true, //是否显示刻度标签
            color: "#ffffff" //刻度标签的文字颜色
          }
        },
        yAxis: {
          name: "单位(万kwh)",
          nameTextStyle: {
            //设置坐标轴的颜色
            color: "#5B6BDC"
          },
          axisLabel: {
            show: true, //是否显示刻度标签
            color: "#ffffff" //刻度标签的文字颜色
          },
          axisLine: {
            //坐标轴线相关设置
            show: true, //是否显示坐标轴线
            lineStyle: {
              color: "#737EDA", //坐标轴线的颜色
              width: 1, //坐标轴线宽,
              type: "solid" //线的类型   solid,dashed,dotted
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed", //背景色为虚线
              color: "rgba(170, 168, 255, 0.3)"
            }
          }
        },
        series: [
          {
            name: "可调负荷值",
            data: [120, 200, 150, 80, 70, 110, 130, 120, 80, 30, 50, 21, 70],
            type: "bar",
            barWidth: 17
          }
        ]
      };
      myChart.setOption(option);
    },
    sixCharts() {
      let myChart = this.$echarts.init(document.getElementById("pieTwo"));
      var option = {
        title: {
          text: `绿色用能\n37.05%`,
          x: "center",
          top: "44%",
          textStyle: {
            fontWeight: "normal",
            fontSize: 18,
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          show: true,
          textStyle: {
            color: "#fff" // 设置字体颜色为
          }
        },
        series: [
          {
            type: "pie",
            center: ["50%", "55%"],
            radius: ["45%", "65%"],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = ["#57E3A0", "#3254DD", "#FFA723"];
                  return colorList[params.dataIndex];
                }
              }
            },
            label: {
              show: true,
              position: "outside",
              formatter: "{a|{b}：{d}%}\n{hr|}",
              rich: {
                hr: {
                  backgroundColor: "t",
                  borderRadius: 3,
                  width: 3,
                  height: 3,
                  padding: [3, 3, 0, -12]
                },
                a: {
                  padding: [-30, 15, -20, 15]
                }
              }
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                  width: 1
                }
              }
            },
            data: [
              {
                name: "化石燃料用能",
                value: 372
              },
              {
                name: "绿色用能",
                value: 312
              },
              {
                name: "其他用能",
                value: 158
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
    },
    sevenCharts() {
      let myChart = this.$echarts.init(document.getElementById("lineArea"));
      var option = {
        legend: {
          show: true,
          top: "5%",
          textStyle: {
            color: "#fff" // 设置字体颜色为红色
          }
        },
        xAxis: {
          type: "category",
          data: [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30"
          ],
          axisLine: {
            //坐标轴线相关设置
            show: true, //是否显示坐标轴线
            lineStyle: {
              color: "#737EDA", //坐标轴线的颜色
              width: 1, //坐标轴线宽,
              type: "solid" //线的类型   solid,dashed,dotted
            }
          },
          axisTick: {
            //坐标轴刻度的相关设置
            show: false //是否显示坐标轴刻度
          },
          axisLabel: {
            show: true, //是否显示刻度标签
            color: "#ffffff" //刻度标签的文字颜色
          },
          boundaryGap: false
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line"
          }
        },

        yAxis: {
          name: "单位(万kwh)",
          nameTextStyle: {
            //设置坐标轴的颜色
            color: "#5B6BDC"
          },
          axisLabel: {
            show: true, //是否显示刻度标签
            color: "#ffffff" //刻度标签的文字颜色
          },
          axisLine: {
            //坐标轴线相关设置
            show: true, //是否显示坐标轴线
            lineStyle: {
              color: "#737EDA", //坐标轴线的颜色
              width: 1, //坐标轴线宽,
              type: "solid" //线的类型   solid,dashed,dotted
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed", //背景色为虚线
              color: "rgba(170, 168, 255, 0.3)"
            }
          }
        },
        series: [
          {
            name: "基线负荷",
            data: [
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110,
              110
            ],
            type: "line",
            smooth: false,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: "#FCFF74",
                lineStyle: {
                  color: "#FCFF74",
                  width: 1, //设置线条宽度
                  type: "dotted" //设置线条显示：'dotted'虚线 'solid'实线
                }
              }
            }
          },
          {
            name: "实际负荷",
            showSymbol: false,
            data: [
              65,
              43,
              54,
              42,
              43,
              53,
              64,
              24,
              53,
              64,
              62,
              53,
              66,
              12,
              45,
              65,
              43,
              56,
              76,
              98,
              32,
              64,
              65,
              78,
              43,
              78,
              43,
              76,
              23,
              65
            ],
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                color: "#FF7759", //点颜色
                lineStyle: {
                  color: "#FF7759", //线颜色
                  width: 1 //设置线条宽度
                }
              }
            }
          },
          {
            name: "预测负荷",
            showSymbol: false,
            data: [
              43,
              64,
              65,
              76,
              76,
              87,
              43,
              23,
              32,
              56,
              65,
              73,
              24,
              11,
              45,
              65,
              23,
              43,
              54,
              65,
              75,
              23,
              54,
              75,
              76,
              87,
              53,
              43,
              65,
              74,
              42
            ],
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                color: "#31BDC6",
                lineStyle: {
                  color: "#31BDC6", //线颜色
                  width: 1 //设置线条宽度
                }
              }
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "rgba(49, 189, 198, 0.50)" },
                  { offset: 1, color: "rgba(49, 189, 198, 0)" }
                ],
                globalCoord: false // 缺省为 false
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    eightCharts() {
      let myChart = this.$echarts.init(document.getElementById("twoPie"));
      var option = {
        title: {
          textStyle: {
            fontSize: 16,
            color: "#999",
            lineHeight: 20
          },
          subtextStyle: {
            fontSize: 28,
            color: "#333"
          },
          textAlign: "center",
          left: "39.8%",
          top: "45%"
        },
        tooltip: {
          show: true,
          trigger: "item",
          backgroundColor: "blue",
          formatter: function(param) {
            /*
            param.seriesName +
              "<br>" +
              param.marker +
              "&nbsp;" +
              param.name +
              ":" +
              "<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注册用户:" +
              param.value +
              "<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;响应规模：" +
              param.value +
              "%"+
              "<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;占比：" +
              param.percent +
              "%"
            */
            let res = `
            <div style="width:250px;height:100px;display:flex;flex-direction:column;justify-content:space-around;align-items:center">          
              <div>
                  <span>注册用户</span><span>140户</span>
              </div>        
              <div>
                  <span>响应规模</span><span>140户</span>
              </div>
              <div>
                  <span>占比</span><span>50%</span>
              </div>
            `
            return res;
          }
        },
        color: this.colorList,
        series: [
          {
            name: "姓名",
            type: "pie",
            radius: [60, 90],
            center: ["40%", "50%"],
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              normal: {
                borderWidth: 2,
                borderColor: "#091137",
                color: function(params) {
                  var colorList = ["#31FBFB", "#5765E3"];
                  return colorList[params.dataIndex];
                }
              }
            },

            data: [
              { name: "代理用户", value: 100 },
              { name: "直接用户", value: 100 }
            ]
          }
        ]
      };
      myChart.setOption(option);
    },
    nineCharts(){
      let myChart = this.$echarts.init(document.getElementById("twoBar"));
      var option = {
        legend: {
          show: true,
          top: "5%",
          textStyle: {
            color: "#fff" // 设置字体颜色为红色
          }
        },
        color: {
          type: "linear",
          x: 1,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            { offset: 0, color: "#D6872A" },
            { offset: 1, color: "#CCC511" }
          ],
          globalCoord: false // 缺省为 false
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        xAxis: {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          axisPointer: {
            show: true
          },
          axisLine: {
            //坐标轴线相关设置
            show: true, //是否显示坐标轴线
            lineStyle: {
              color: "#737EDA", //坐标轴线的颜色
              width: 1, //坐标轴线宽,
              type: "solid" //线的类型   solid,dashed,dotted
            }
          },
          axisTick: {
            //坐标轴刻度的相关设置
            show: false //是否显示坐标轴刻度
          },
          axisLabel: {
            show: true, //是否显示刻度标签
            color: "#ffffff" //刻度标签的文字颜色
          }
        },
        yAxis: {
          name: "单位(万kwh)",
          nameTextStyle: {
            //设置坐标轴的颜色
            color: "#5B6BDC"
          },
          axisLabel: {
            show: true, //是否显示刻度标签
            color: "#ffffff" //刻度标签的文字颜色
          },
          axisLine: {
            //坐标轴线相关设置
            show: true, //是否显示坐标轴线
            lineStyle: {
              color: "#737EDA", //坐标轴线的颜色
              width: 1, //坐标轴线宽,
              type: "solid" //线的类型   solid,dashed,dotted
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed", //背景色为虚线
              color: "rgba(170, 168, 255, 0.3)"
            }
          }
        },
        series: [
          {
            name: "可调负荷值",
            data: [120, 200, 150, 80, 70, 110, 130, 120, 80, 30, 50, 21, 70],
            type: "bar",
            barWidth: 17
          },
          {
            name: "可调负荷值2",
            data: [120, 200, 150, 80, 70, 110, 130, 120, 80, 30, 50, 21, 70],
            type: "bar",
            barWidth: 17
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>


<style lang="less" scoped>
.bg-style {
  background: url("../../../../assets/img/bg.jpg");
  background-size: 100% 100%;
  padding: 10px;
  height: 100;
}

.mddile-area {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 5px;
}

.top-area {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 5px;
}

.bottom-area {
  display: flex;
  width: 100%;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 5px;
}
</style>>

</style>
